// 2.引入并声明使用插件
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 7.引入路由
import Login from '@/pages/Login'
import Home from '@/pages/Home'
import Register from '@/pages/Register'
import Search from '@/pages/Search'


// 将原有的push 方法地址，保存起来，后期还能拿到原来的
const originPush = VueRouter.prototype.push

// 修改原型的push，让原型的push 指向另一个函数
VueRouter.prototype.push = function (location, onResolved, onRejected) {
  // location 就是我们调用 this.$router.push 传递过来的对象
  // {
  //   name: 'search',
  //   params: {keyword: this.keyword || undefined},
  //   query:{keyword1:this.keyword.toUpperCase()},
  // }
  if (onResolved === undefined && onRejected === undefined) {
    // 证明调用的时候只传递了这个匹配路由对象，没有传递成功或者失败的回调
    return originPush.call(this, location).catch(() => {
    })
  } else {
    // 证明调用的时候传递了成功或者失败的回调，或者都有
    return originPush.call(this, location, onResolved, onRejected)
  }
}

const originReplace = VueRouter.prototype.replace
// 修改原型的replace，让原型的push 指向另一个函数
VueRouter.prototype.replace = function (location, onResolved, onRejected) {
  // location 就是我们调用 this.$router.push 传递过来的对象
  if (onResolved === undefined && onRejected === undefined) {
    // 证明调用的时候只传递了这个匹配路由对象，没有传递成功或者失败的回调
    return originReplace.call(this, location).catch(() => {
    })
  } else {
    // 证明调用的时候传递了成功或者失败的回调，或者都有
    return originReplace.call(this, location, onResolved, onRejected)
  }
}


// 3.向外暴露一个路由器的对象
export default new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/home', //默认路径
    },
    {
      path: '/login',
      component: Login, // 8.注册路由
      meta: {
        // 1.配置 meta ，路由对象中的 元配置 项，可以配置所需要的任何数据
        isHidden: true
      }
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/register',
      component: Register,
      // 1.配置 meta ，路由对象中的 元配置 项，可以配置所需要的任何数据
      meta: {
        isHidden: true
      }
    },
    {
      // path: '/search',
      // 因为传入参数时格式是这样的 'this.keyword'，这里需要接收传入的参数，写成以下格式
      // '/search/:keyword' ,这样写，就能接收到 params 参数，
      // path: '/search/:keyword',
      path: '/search/:keyword?',// 在路由的后面加加一个 '？'可以实现 params 参数可传可不传的目的
      // path: '/search',
      component: Search,
      name: 'search', // 1.命名路由
      /*
      * props
      *   作用：props 是在路由组件中操作 params 参数和 query 参数的简化方法
      *   1.props: true,会默认把传递过来的 params 参数，额外的映射为组件中的属性去操作
      *   2.props: {username: '彭于晏'} 传递一个对象，传递的是额外的，自己需要的静态数据，不需要就不用
      *   3.传入一个函数，如果props中是一个函数，可以手动把 params和query 全部映射为组件中的属性
      * */
      // props: true,
      // props: { username: '彭于晏'}
      props: (route) => {
        return {keyword: route.params.keyword, keyword1: route.query.keyword1}
      }
    }
  ] // 4.配置路由
})
